import ReactDOM from 'react-dom'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from 'react-three-fiber'

function Welcomes(props) {
	// This reference will give us direct access to the mesh
	const mesh = useRef()

	// Set up state for the hovered and active state
	const [hovered, setHover] = useState(false)
	const [active, setActive] = useState(false)

	// Rotate mesh every frame, this is outside of React without overhead
	useFrame(() => {
		mesh.current.rotation.x = mesh.current.rotation.y += 0.01
	})

	return (
		<mesh
			{...props}
			ref={mesh}
			scale={active ? [1.5, 1.5, 1.5] : [1, 1, 1]}
			onClick={(event) => setActive(!active)}
			onPointerOver={(event) => setHover(true)}
			onPointerOut={(event) => setHover(false)}>
			<boxBufferGeometry args={[1, 1, 1]} />
			<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
		</mesh>
	)
}

ReactDOM.render(
	<Canvas>
		<ambientLight />
		<pointLight position={[10, 10, 10]} />
		<Welcomes position={[-1.2, 0, 0]} />
		<Welcomes position={[1.2, 0, 0]} />
	</Canvas>,
	document.getElementById('root')
)
export default class Welcome extends React.PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			visible: false
		};
	}
	/*  */
	render() {
		//ERP编号、项目编号、项目名称
		console.log(this.state)

		return (
			<div>
			
			</div>
		);
	}
}
